<template>
	<div class="home">
		<!-- banner区域 start-->
		<div class="banner w">
		    <div class="main">
		        <ul>
		            <li>
		                <a href="#"><img src="../assets/img_13.png"></a>
		            </li>
		        </ul>
		    </div>
		    <div class="newsflash">
		        <div class="news">
		            <div class="news_hd">
		                <h5>品优购快报</h5>
		                <a href="#">更多 &gt</a>
		            </div>
		            <div class="news_bd">
		                <ul>
		                    <li><a href="#"><strong>[特惠]</strong>&nbsp备战开学季 全民半价购数码</a></li>
		                    <li><a href="#"><strong>[公告]</strong>&nbsp品优稳占家电网购六成份额</a></li>
		                    <li><a href="#"><strong>[特惠]</strong>&nbsp百元中秋全品类礼券限量领</a></li>
		                    <li><a href="#"><strong>[公告]</strong>&nbsp上品优生鲜 享阳澄湖大闸壁</a></li>
		                    <li><a href="#"><strong>[特惠]</strong>&nbsp每日享折扣品优品质游</a></li>
		                </ul>
		            </div>
		        </div>
		        <div class="lifeservice">
		            <ul>
		                <li>
		                   <i class="life_ico01"></i>
		                   <p>话费</p>
		                </li>
		                <li>
		                    <i class="life_ico01"></i>
		                    <p>话费</p>
		                 </li>
		                 <li>
		                    <i class="life_ico01"></i>
		                    <p>话费</p>
		                 </li>
		                 <li>
		                    <i class="life_ico01"></i>
		                    <p>话费</p>
		                 </li>
		                 <li>
		                    <i class="life_ico01"></i>
		                    <p>话费</p>
		                 </li>
		                 <li>
		                    <i class="life_ico01"></i>
		                    <p>话费</p>
		                 </li>
		                 <li>
		                    <i class="life_ico01"></i>
		                    <p>话费</p>
		                 </li>
		                 <li>
		                    <i class="life_ico01"></i>
		                    <p>话费</p>
		                 </li>
		                 <li>
		                    <i class="life_ico01"></i>
		                    <p>话费</p>
		                 </li>
		                 <li>
		                    <i class="life_ico01"></i>
		                    <p>话费</p>
		                 </li>
		                 <li>
		                    <i class="life_ico01"></i>
		                    <p>话费</p>
		                 </li>
		                 <li>
		                    <i class="life_ico01"></i>
		                    <p>话费</p>
		                 </li>
		            </ul>
		        </div>
		        <div class="bargain">
		            <img src="../assets/img_07.jpg">
		        </div>
		    </div>
		</div>
		<!-- banner区域 stop-->
		
		<!-- recomoon start-->
		<div class="recomoon w">
		    <div class="recomoon_hd">
		        <h1>
		            <img src="../assets/img_06.png">
		        </h1>
		        <h2>今日推荐</h2>
		    </div>
		    <div class="recomoon_bd">
		        <ul>
		            <li>
		                <img src="../assets/img_01.png">
		            </li>
		            <li>
		                <img src="../assets/img_01.png">
		            </li>
		            <li>
		                <img src="../assets/img_01.png">
		            </li>
		            <li>
		                <img src="../assets/img_01.png">
		            </li>
		        </ul>
		    </div>
		</div>
		<!-- recomoon stop-->
		
		<!-- lifelove start-->
		<div class="lifelove w">
		    <div class="lifelove_hd">
		        <h1>猜你喜欢</h1>
		        <div class="change">换一批</div>
		    </div>
		    <div class="lifelove_bd">
		        <ul>
		            <li>
		                <div class="lifelove_img">
		                    <img src="../assets/img_03.png">
		                </div>
		                <div>
		                    <p>阳光美包新款单肩包女</p>
		                    <p>包时尚子母包四件套女</p>
		                    <h3>￥116</h3>
		                </div>
		            </li>
		            <li>
		                <div class="lifelove_img">
		                    <img src="../assets/img_03.png">
		                </div>
		                <div>
		                    <p>阳光美包新款单肩包女</p>
		                    <p>包时尚子母包四件套女</p>
		                    <h3>￥116</h3>
		                </div>
		            </li>
		            <li>
		                <div class="lifelove_img">
		                    <img src="../assets/img_03.png">
		                </div>
		                <div>
		                    <p>阳光美包新款单肩包女</p>
		                    <p>包时尚子母包四件套女</p>
		                    <h3>￥116</h3>
		                </div>
		            </li>
		            <li>
		                <div class="lifelove_img">
		                    <img src="../assets/img_03.png">
		                </div>
		                <div>
		                    <p>阳光美包新款单肩包女</p>
		                    <p>包时尚子母包四件套女</p>
		                    <h3>￥116</h3>
		                </div>
		            </li>
		            <li>
		                <div class="lifelove_img">
		                    <img src="../assets/img_03.png">
		                </div>
		                <div>
		                    <p>阳光美包新款单肩包女</p>
		                    <p>包时尚子母包四件套女</p>
		                    <h3>￥116</h3>
		                </div>
		            </li>
		            <li>
		                <div class="lifelove_img">
		                    <img src="../assets/img_03.png">
		                </div>
		                <div>
		                    <p>阳光美包新款单肩包女</p>
		                    <p>包时尚子母包四件套女</p>
		                    <h3>￥116</h3>
		                </div>
		            </li>
		        </ul>
		    </div>
		</div>
		<!-- lifelove stop-->
	</div>
</template>

<script>
</script>

<style scoped>
	/* banner区域 */
	.banner {
	    height: 465px;
	}
	
	.banner .main {
	    float: left;
	    width: 709px;
	    height: 455px;
	    margin-left: 219px; 
	    margin-top: 11px;
	}
	.banner .main img {
	    width: 100%;
	    height: 455px;
	}
	.newsflash {
	    margin-top: 11px;
	    float: right;
	    width: 250px;
	    height: 455px;
	}
	.newsflash .news {
	    height: 165px;
	    border: 1px solid #ccc;
	    padding: 0 15px;
	}
	.newsflash .lifeservice {
	    height: 209px;
	    border: 1px solid #ccc;
	    border-top: 0px;
	}
	.newsflash .bargain {
	    height: 75px;
	    background-color: purple;
	    margin-top: 5px;
	}
	.newsflash .bargain img {
	    width: 100%;
	    height: 75px;
	}
	
	.news .news_hd {
	    height: 33px;
	    line-height: 33px;
	    border-bottom: 1px dotted #ccc;
	}
	.news .news_bd {
	    height: 131px;
	    padding-top: 3px;
	}
	
	.news .news_hd h5 {
	    float: left;
	    font-size: 14px;
	    font-weight: 400;
	    color: #666;
	}
	.news .news_hd a {
	    float: right;
	}
	.news .news_bd li {
	    height: 25px;
	}
	.lifeservice{
	    overflow: hidden;
	}
	.lifeservice li {
	    float: left;
	    width: 63px;
	    height: 70px;
	    border-bottom: 1px solid #ccc;
	    border-right:  1px solid #ccc;
	    padding-top: 13px;
	}
	.lifeservice ul {
	    width: 265px;
	}
	.lifeservice i {
	    display: block;
	    width: 25px;
	    height: 25px;
	    margin-left: 22px;
	    background-color: red;
	}
	.lifeservice p {
	    text-align: center;
	    margin-top: 5px;
	}
	.lifeservice .life_ico01 {
	    background: url(../assets/img_02.png) no-repeat -19px -15px;
	}
	
	/* recomoon区域 */
	.recomoon {
	    height: 163px;
	    margin-top: 11px;
	    background-color: #ebebeb;
	}
	.recomoon_hd {
	    float: left;
	    width: 208px;
	    height: 163px;
	    background-color: #5c5251;
	}
	.recomoon_hd h1 {
	    display: block;
	    width: 57px;
	    height: 57px;
	    margin: 30px auto;
	    margin-bottom: 10px;
	}
	.recomoon_hd h2 {
	    font-size: 18px;
	    color: #fff;
	    text-align: center;
	}
	.recomoon_bd {
	    float: left;
	    padding: 10px 0;
	}
	.recomoon_bd li {
	    float: left;
	    width: 247px;
	    height: 145px;
	    border-right: 1px solid #ccc;
	}
	.recomoon_bd li:last-child{
	    border: 0px;
	}
	.recomoon_bd li img {
	    width: 100%;
	    height: 145px;
	}
	
	/* lifelove区域 */
	.lifelove {
	    height: 295px;
	    margin-top: 20px;
	}
	.lifelove_hd {
	    height: 60px;
	    line-height: 60px;
	}
	.lifelove_hd h1 {
	    float: left;
	    font-weight: 400;
	    font-size: 18px;
	}
	.lifelove_hd .change {
	    float: right;
	}
	
	
	.lifelove_bd {
	    height: 235px;
	    border: 1px solid #ccc;
	    overflow: hidden;
	}
	.lifelove_bd ul {
	    width: 1201px;
	}
	.lifelove_bd li {
	    float: left;
	    width: 168px;
	    margin-left: 32px;
	}
	.lifelove_bd .lifelove_img {
	    margin-top: 25px;
	    width: 168px;
	    height: 127px;
	    background-color: purple;
	}
	.lifelove_bd .lifelove_img img {
	    width: 100%;
	    height: 127px;
	}
	.lifelove_bd ul li div:nth-child(2) {
	    margin-top: 10px;
	    border-right: 1px solid #ccc;
	}
	.lifelove_bd ul li div:nth-child(2) h3 {
	    color: #df3033;
	}
</style>